<template>
    <div class="main">
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="标题" prop="title"></el-table-column>
            <el-table-column align="center" label="banner">
                <template slot-scope="scope">
                    <img :src="scope.row.banner" alt="" style="height: 46px"/>
                </template>
            </el-table-column>
            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type==='1'">年会</span>
                    <span v-if="scope.row.type==='2'">城市合伙人</span>
                    <span v-if="scope.row.type==='3'">普通专题</span>
                    <span v-if="scope.row.type==='4'">H5</span>
                    <span v-if="scope.row.type==='5'">独立箱起</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="排序" prop="sort"></el-table-column>
            <el-table-column align="center" label="是否启用" prop="status" width="120">
                <template slot-scope="scope">
                    {{scope.row.status?'启用':'不启用'}}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container" v-if="listTotal > 0">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex" :page-size="listQuery.pageSize" :total="listTotal" layout="total, prev, pager, next, jumper"></el-pagination>
        </div>

        <el-dialog :title="form.id ? '编辑' : '新建'" :visible.sync="showEditPop">
            <el-form :model="form" :rules="formRules" size="medium" ref="form" label-width="120px">
                <el-form-item label="标题:" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="banner:" prop="banner">
                    <el-upload
                            class="avatar-uploader"
                            accept="image/*"
                            :action="upladUrl"
                            name="file"
                            :show-file-list="false"
                            :on-success="uploadSuccess"
                            :before-upload="beforeUpload">
                        <img v-if="form.banner" :src="form.banner" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="类型:" prop="type">
                    <el-select v-model="form.type" placeholder="请选择">
                        <el-option :key="1" label="年会" :value="'1'"></el-option>
                        <el-option :key="2" label="城市合伙人" :value="'2'"></el-option>
                        <el-option :key="3" label="普通专题" :value="'3'"></el-option>
                        <el-option :key="4" label="H5" :value="'4'"></el-option>
                        <el-option :key="5" label="独立箱起" :value="'5'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型值:" prop="typeVal">
                    <el-input v-model="form.typeVal"></el-input>
                </el-form-item>
                <el-form-item label="规则详情URL:" prop="detailUrl">
                    <el-input v-model="form.detailUrl"></el-input>
                </el-form-item>
                <el-form-item label="简介:" prop="instruction">
                    <el-input type="textarea" :rows="2" v-model="form.instruction"></el-input>
                </el-form-item>
                <el-form-item label="排序:" prop="sort">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" prop="status">
                    <el-switch
                            v-model="form.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                <el-button @click="showEditPop = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {regexp} from '../../utils/tools'
    export default {
        name: 'upgradeMakeMoneySet',
        data() {
            return {
                list: [],
                listQuery: {
                    pageIndex: 1,
                    pageSize: 20,
                    isPage: 1
                },
                listTotal: 0,
                listLoading: false,
                form: {},
                formRules: {
                    title: [{required: true, message: '不能为空', trigger: 'change'}],
                    banner: [{required: true, message: '请上传banner'}],
                    type: [{required: true, message: '请选择', trigger: 'change'}],
                    typeVal: [{required: true, message: '不能为空', trigger: 'change'}],
                    detailUrl: [{required: true, message: '不能为空', trigger: 'change'}],
                    sort: [
                        {required: true, message: '不能为空', trigger: 'change'},
                        {pattern: regexp.sort, message: '必须为1-999的正整数', trigger: 'change'},
                    ]
                },
                showEditPop: false,
                btnLoading: false
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.request({
                    url: '/bsnl-activity/upgradeMakeMoneySubjectModule/list',
                    method: 'get',
                    params: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            showEdit(row){
                this.request({
                    url: '/bsnl-activity/upgradeMakeMoneySubjectModule/'+row.id,
                    method: 'get'
                }).then(({data}) => {
                    this.form = data;
                    this.$nextTick(()=>{
                        this.$refs.form.clearValidate()
                    });
                    this.showEditPop = true;
                    this.btnDisabled = false;
                }).catch(err => {
                    console.log(err);
                });
            },
            uploadSuccess(res) {
                this.form.banner = this.replaceImgUrl(res.filePath);
            },
            handleCurrentChange(val){
                this.listQuery.pageIndex = val;
                this.getList();
            },
            save(){
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let url = this.form.id ? '/bsnl-activity/upgradeMakeMoneySubjectModule/update' : '/bsnl-activity/upgradeMakeMoneySubjectModule/create';
                    this.btnLoading = true;
                    this.request({
                        url,
                        method: 'post',
                        data: this.form
                    }).then(() => {
                        this.btnLoading = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        console.log(err)
                        this.btnLoading = false;
                    });
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .avatar-uploader {

        .el-upload {
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 98px;
            text-align: center;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            overflow: hidden;
            box-sizing: border-box;
        }

    }
</style>
